<template>
  <view class="login-container">
    <view class="u-demo-block">
      <!-- <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image> -->
	  <!-- <image class="logo" src="@/static/login/logo.png"/> -->
	  <view class="title">BaseProject平台</view>
      <view class="u-demo-block__content">
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <u--form :model="model1" ref="form1" labelPosition="left">
          <u-form-item prop="username" labelWidth='0'>
            <u--input v-model="model1.username" border="none" placeholder="请输入用户名" clearable></u--input>
          </u-form-item>
          <u-form-item prop="password" labelWidth='0'>
            <u--input v-model="model1.password" placeholder="请输入密码" border="none" password  clearable></u--input>
          </u-form-item>
          <u-form-item prop="code" labelWidth='0'>
			  <view style="display: flex; disjustify-content: space-between; width: 100%;">
				<view>
					<u--input v-model="model1.code" border="none" placeholder="请输入验证码"></u--input>
				</view>
				<!-- <u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled1"></u-button> -->
				<view class="checkcode">
					<image v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/>
					<image v-else src="@/static/checkcode.png" @click="handleChangeCheckCode"/>
				</view>
			  </view>
          </u-form-item>
        </u--form>
        <u-button type="primary" text="登录" @click="submit"></u-button>
        <u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
        <u-code ref="uCode" @change="codeChange" seconds="20" @start="disabled1 = true"
                @end="disabled1 = false"></u-code>
      </view>
    </view>
	<!-- <image src="@/static/login/bk1.png" class="bka"/> -->
	<image src="@/static/login/bk2.png" class="bkb"/>
	<image src="@/static/login/bk3.png" class="bkc"/>
  </view>
</template>

<script>
import { UserService } from '../../request/api-package.js'
export default {
  data() {
    return {
		src: 'https://cdn.uviewui.com/uview/album/1.jpg',
		disabled1: false,
		tips: '',
		model1: {
			username: '',
			password: '',
			code: ''
		},
		rules: {
			username: {
			  type: 'string',
			  required: true,
			  message: '请输入用户名',
			  trigger: ['blur']
			},
			password: {
			  type: 'string',
			  required: true,
			  message: '请输入密码',
			  trigger: ['blur']
			},
			code: {
			  type: 'string',
			  required: true,
			  len: 4,
			  message: '请输入4位验证码',
			  trigger: ['blur']
			},
		},
		disabled: false,
		currdatetime:'',
		requestCodeSuccess: false,
		randCodeImage:''
    }
  },
  onReady() {
    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
    this.$refs.form1.setRules(this.rules)
	
  },
  mounted(){
	this.currdatetime = new Date().getTime();
    this.handleChangeCheckCode();
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    submit() {
      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
      this.$refs.form1.validate().then(res => {
        this.$store.dispatch('auth/login', {
          username: this.model1.username, //用户
          password: this.model1.password, //密码
          captcha: this.model1.code, //验证码
          checkKey: this.currdatetime, //验证码key （应该是时间戳）
          // checkKey: 1681369916587, //验证码key （应该是时间戳）
        }).then((res) => {
          if (res.data.code == 200) {
            uni.$u.toast('登录成功')
            uni.switchTab({
              url: '/pages/home/home'
            })
          } else {
            uni.$u.toast(res.data.message)
          }
          console.log('login', res)
        })
      }).catch(errors => {
        uni.$u.toast('校验失败')
      })
    },
    reset() {
      const validateList = ['username', 'password', 'code']
      this.$refs.form1.resetFields()
      this.$refs.form1.clearValidate()
      setTimeout(() => {
        this.$refs.form1.clearValidate(validateList)
        // 或者使用 this.$refs.form1.clearValidate()
      }, 10)
    },
	  /**刷新验证码*/
	  handleChangeCheckCode(){
		this.currdatetime = new Date().getTime();
		this.model1.code = ''
		UserService.getRandomImage(this.currdatetime).then(res =>{
			console.log('res00',res)
			  if(res.data.success){
				this.randCodeImage = res.data.result
				this.requestCodeSuccess=true
			  }else{
				this.$message.error(res.message)
				this.requestCodeSuccess=false
			  }
			}).catch(()=>{
			  this.requestCodeSuccess=false
			})
	  },
    // hideKeyboard() {
    // 	uni.hideKeyboard()
    // }
  },
}
</script>

<style lang="scss">
.login-container {
	background-color: #F7F8FA;
	position: relative;
	.u-demo-block {
		display: flex;
		gap: 20px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 170rpx;
		.u-demo-block__content{
			margin-top: 50rpx;
			z-index: 10;
			width: 80%;
		}
		.u-form-item{
			background-color: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 15px;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
	.bka{
		position: absolute;
		top: -10rpx;
		left: -100rpx;
		width: 300rpx;
		height: 300rpx;
	}
	.bkb{
		position: absolute;
		top: 260rpx;
		left: -260rpx;
		width: 400rpx;
		height: 400rpx;
	}
	.bkc{
		position: absolute;
		top: 300rpx;
		right: -560rpx;
		width: 1200rpx;
		height: 1200rpx;
	}
	.logo{
		width: 280rpx;
		height: 70rpx;
	}
	.title{
		// font-weight: bold;
		font-size: 50rpx;
		margin-bottom: 100rpx;
	}
	.checkcode{
		width: 200rpx;
		text-align: right;
		image{
			display:inline-block;
			width: 200rpx;
			height: 60rpx !important;
		}
	}
}
</style>